<%-- 
    Document   : MHospitalDetail
    Created on : 31 ?.?. 2554, 13:04:04
    Author     : SUNTIPARB
--%>

<%@page import="java.util.ResourceBundle"%>
<%-- Form Function --%>
<script type="text/javascript">
<%ResourceBundle resource = ResourceBundle.getBundle("Constant_en");%>
    // pre-submit callback
    function showRequest(formData, jqForm, options) {
//        // formData is an array; here we use $.param to convert it to a string to display it
//        // but the form plugin does this for you automatically when it submits the data
//        var queryString = $.param(formData);
//
//        // jqForm is a jQuery object encapsulating the form element.  To access the
//        // DOM element for the form do this:
//        // var formElement = jqForm[0];
//
//        alert('About to submit: \n\n' + queryString);
//
//        // here we could return false to prevent the form from being submitted;
//        // returning anything other than false will allow the form submit to continue
//        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form)  {
        ContentAjaxRequest('SRV/MHospitalList', 'section #container');
    }

    function findLocation(location, marker) {
        $('#map_canvas').gmap('search', {'location': location}, function(found, results) {
            if ( found ) {
//                $.each(results[0].address_components, function(i,v) {
//                        if ( v.types[0] == "administrative_area_level_1" || v.types[0] == "administrative_area_level_2" ) {
//                                $('#state'+marker.__gm_id).val(v.long_name);
//                        } else if ( v.types[0] == "country") {
//                                $('#country'+marker.__gm_id).val(v.long_name);
//                        }
//                });
                marker.setTitle(results[0].formatted_address);
//                $('#txtLocation').val(results[0].formatted_address);
                $('#txtLatitude').val(location.lat());
                $('#txtLongtitude').val(location.lng());
//                $('#txtLocation'+marker.__gm_id).val(results[0].formatted_address);
//                openDialog(marker);
            }else{
                clearTextBox();
            }
        });
    }

//    function openDialog(el) {
//        $('#dialog'+el.__gm_id).dialog({'modal':true, 'title': 'Edit and save point', 'buttons': {
//                "Remove": function() {
//                        $(this).dialog( "close" );
//                        el.setMap(null);
//                },
//                "Save": function() {
//                        $(this).dialog( "close" );
//                }
//        }});
//    }

    function clearTextBox(){
//        $('#txtLocation').val("");
        $('#txtLatitude').val("");
        $('#txtLongtitude').val("");
    }

    $(document).ready(function() {
        $("#map_canvas").gmap({'center': new google.maps.LatLng(<%= resource.getString("gmap.default_lat") %>, <%= resource.getString("gmap.default_lng") %>),
                        'zoom': <%= resource.getString("gmap.default_zoom") %>,
                        'callback': function(map) {
            if ($('#txtLatitude').val()!=""&&$('#txtLongtitude').val()!=""){
                var latlng = new google.maps.LatLng($('#txtLatitude').val(), $('#txtLongtitude').val());
                $('#map_canvas').gmap('addMarker', {'position': latlng, 'title': $('#txtLocation').val(), 'draggable': true, 'bound': false}, function(map, marker) {
                        findLocation(marker.getPosition(), marker);
                    }).dragend( function(event) {
                            var self = this;
                            findLocation(event.latLng, self);
                    }).click( function() {
                            this.setMap(null);
                            clearTextBox();
                    })
            }
            $(map).click( function(event) {
                    $('#map_canvas').gmap('clearMarkers');
                    $('#map_canvas').gmap('addMarker', {'position': event.latLng, 'title': '', 'draggable': true, 'bound': false}, function(map, marker) {
//                            $('#dialog').append('<form id="dialog'+marker.__gm_id+'" method="get" action="/" style="display:none;"><p><label for="country">Country</label><input id="country'+marker.__gm_id+'" class="txt" name="country" value=""/></p><p><label for="state">State</label><input id="state'+marker.__gm_id+'" class="txt" name="state" value=""/></p><p><label for="address">Address</label><input id="address'+marker.__gm_id+'" class="txt" name="address" value=""/></p><p><label for="comment">Comment</label><textarea id="comment" class="txt" name="comment" cols="40" rows="5"></textarea></p></form>');
                            findLocation(marker.getPosition(), marker);
                    }).dragend( function(event) {
                            var self = this;
                            findLocation(event.latLng, self);
                    }).click( function() {
                            this.setMap(null);
                            clearTextBox();
//                            openDialog(this);
                    })
            });
        }});
        $("#formMHospital input, #formMHospital select,#formMHospital button").uniform();
        $("#btnBack").click(function(){
            ContentAjaxRequest('SRV/MHospitalList', 'section #container');
        });

        //Bind form submit
        var options = {
            url: '<%=request.getContextPath()%>/SRV/MHospitalDetail/formMHospital_Submit',
            type: 'POST',
            dataType:  'json',
            beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse  // post-submit callback

            // other available options:
            //url:       url         // override for form's 'action' attribute
            //type:      type        // 'get' or 'post', override for form's 'method' attribute
            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
            //clearForm: true        // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit

            // $.ajax options can be used here too, for example:
            //timeout:   3000
        };
        $("#formMHospital").validate({
            rules: {
                txtName : "required"
            },
            messages: {
                txtName : "Please enter Hospital Name"
            },
            submitHandler: function(form) {
                $(form).ajaxSubmit(options);
            }
        });

    });


</script>
<%-- End Form Function --%>
<!-- insert content here -->
<h3>Hospital Detail</h3>
<div class="grid_8">
    <div class="box1">
        <div class="indent-box1">
            <div class="wrapper">
                <form id="formMHospital" class="form" method="GET">
                <!-- Query String -->
                    <input type="hidden" id="HospitalId" name="HospitalId" value="<%=  request.getAttribute("HospitalId")%>" />
                <!-- End Query String -->
                    <table>
                        <tr>
                            <td><em>Name</em></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="p1" id="txtName_wrapper">
                                    <input type="text" name="txtName" id="txtName" class="width-90" value="<%=  request.getAttribute("txtName")%>" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><em>Location</em></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="p1" id="txtLocation_wrapper">
                                    <textarea rows="5" cols="100%" name="txtLocation" id="txtLocation" class="width-90"><%=  request.getAttribute("txtLocation")%></textarea>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><em>Hospital Level</em></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="p1" id="txtHospitalLvl_wrapper">
                                    <input type="text" name="txtHospitalLvl" id="txtHospitalLvl" class="width-90" value="<%=  request.getAttribute("txtHospitalLvl")%>" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><em>Latitude</em></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="p1" id="txtLatitude_wrapper">
                                    <input type="text" name="txtLatitude" id="txtLatitude" class="width-90" value="<%=  request.getAttribute("txtLatitude")%>" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><em>Longtitude</em></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="p1" id="txtLongtitude_wrapper">
                                    <input type="text" name="txtLongtitude" id="txtLongtitude" class="width-90" value="<%=  request.getAttribute("txtLongtitude")%>" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="control">
                                <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
                                <input type="button" name="btnBack" id="btnBack" value="Back" />
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="grid_8">
    <div class="box">
        <div class="indent-box">
            <div class="wrapper">
                <div id="map_canvas" style="height:720px;">Show Gmap here!!</div>
                <div id="dialog"></div>
            </div>
        </div>
    </div>
</div>
